<template> 
	<view> 
		<view class="page"> 
			<comp-common v-bind="{data:data}"></comp-common> 
			<comp-header v-bind="{data:data}"></comp-header> 
			<view class="body after-navber"> 
				<view style="background: #fff"> 
					<scroll-view class="month-scroll" :scrollLeft="month_scroll_x" :scrollWithAnimation="false" scrollX="true"> 
						<view class="month-list flex flex-row"> 
							<view class="month-item flex-grow-0"></view> 
							<view class="month-item flex-grow-0"></view> 
							<block v-for="(yitem,index) in data.year_list" :key="index"> 
								<view @click="changeMonth" class="month-item flex-grow-0 flex-x-center flex-y-center " :class="[item.active?'active':'']" 
								 :data-month-index="index" :data-year-index="year_index" v-for=" (mitem,mindex) in yitem.month_list" :key="mindex"> 
									<view> 
										<view style="font-size: 9pt;margin-bottom: 8upx">{{mitem.name_en}}</view> 
										<view>{{mitem.name_cn}}</view> 
									</view> 
								</view> 
							</block> 
							<view class="month-item flex-grow-0"></view> 
							<view class="month-item flex-grow-0"></view> 
						</view> 
					</scroll-view> 
					<view class="current-year flex flex-row"> 
						<view class="flex-grow-1"></view> 
						<view class="flex-grow-0"> 
							<view style="margin-top: -16upx;font-size: 9pt;">{{data.current_year}}</view> 
						</view> 
						<view class="flex-grow-1"></view> 
					</view> 
					<view class="flex flex-row detail-data"> 
						<view class="flex-grow-1 flex-y-center"> 
							<view style="width: 100%"> 
								<view style="color: #888;">日均成交额</view> 
								<view>{{data.daily_avg}}</view> 
							</view> 
						</view> 
						<view class="flex-grow-1 flex-y-center"> 
							<view style="width: 100%;text-align: center;"> 
								<view style="color: #888;">当月成交额</view> 
								<view>{{data.month_count}}</view> 
							</view> 
						</view> 
						<view class="flex-grow-1 flex-y-center"> 
							<view style="width: 100%;text-align: right;"> 
								<view style="color: #888;">对比上月</view> 
								<view>{{data.up_rate}}</view> 
							</view> 
						</view> 
					</view> 
				</view> 
			</view> 
		<comp-footer v-bind="{data:data}"></comp-footer> 
		</view> 
 
	</view> 
</template> 
 
<script>var myVue = {};
//#ifdef MP-WEIXIN
var Vue = require('vue')
//#endif
//#ifdef H5
var Vue = require('vue').default
//#endif 
	var app = Vue.prototype.getApp, 
		api = Vue.prototype.getApp.api; 
	export default { 
		data() { 
			return { 
				data: { 
					current_year: "", 
					current_month: "", 
					month_scroll_x: 1e5, 
					year_list: [], 
					daily_avg: "-", 
					month_count: "-", 
					up_rate: "-" 
				}, 
			}; 
		}, 
		onLoad: function(t) {myVue = this; 
			myVue.getApp.page.onLoad(this, t); 
			var a = this; 
			myVue.getApp.core.showNavigationBarLoading(), myVue.getApp.request({ 
				url: myVue.getApp.api.store.user.tongji_year_list, 
				success: function(t) { 
					a.setData({ 
						year_list: t.data.year_list, 
						current_year: t.data.current_year, 
						current_month: t.data.current_month 
					}), a.setMonthScroll(), a.getMonthData(); 
				}, 
				complete: function() { 
					myVue.getApp.core.hideNavigationBarLoading(); 
				} 
			}); 
		}, 
		onReady: function() { 
			myVue.getApp.page.onReady(this); 
		}, 
		onShow: function() { 
			myVue.getApp.page.onShow(this); 
		}, 
		onHide: function() { 
			myVue.getApp.page.onHide(this); 
		}, 
		onUnload: function() { 
			myVue.getApp.page.onUnload(this); 
		}, 
		onPullDownRefresh: function() {}, 
		onReachBottom: function() {}, 
 
		methods: { 
			changeMonth: function(t) { 
				var a = this, 
					e = t.currentTarget.dataset.yearIndex, 
					r = t.currentTarget.dataset.monthIndex; 
				for (var n in a.data.year_list) 
					for (var o in n == e ? (a.data.year_list[n].active = !0, 
								a.data.current_year = a.data.year_list[n].year) : a.data.year_list[n].active = !1, 
							a.data.year_list[n].month_list) n == e && o == r ? (a.data.year_list[n].month_list[o].active = !0, 
						a.data.current_month = a.data.year_list[n].month_list[o].month) : a.data.year_list[n].month_list[o].active = !1; 
				a.setData({ 
					year_list: a.data.year_list, 
					current_year: a.data.current_year 
				}), a.setMonthScroll(), a.getMonthData(); 
			}, 
			setMonthScroll: function() { 
				var t = this, 
					a = t.getApp.core.getSystemInfoSync().screenWidth / 5, 
					e = 0; 
				for (var r in t.data.year_list) { 
					var n = !1; 
					for (var o in t.data.year_list[r].month_list) { 
						if (t.data.year_list[r].month_list[o].active) { 
							n = !0; 
							break; 
						} 
						e++; 
					} 
					if (n) break; 
				} 
				t.setData({ 
					month_scroll_x: (e - 0) * a 
				}); 
			}, 
			setCurrentYear: function() { 
				var t = this; 
				for (var a in t.data.year_list) 
					if (t.data.year_list[a].active) { 
						t.data.current_year = t.data.year_list[a].year; 
						break; 
					} 
				t.setData({ 
					current_year: t.data.current_year 
				}); 
			}, 
			getMonthData: function() { 
				var a = this; 
				a.getApp.core.showNavigationBarLoading(), a.setData({ 
					daily_avg: "-", 
					month_count: "-", 
					up_rate: "-" 
				}), a.getApp.request({ 
					url: a.getApp.api.store.user.tongji_month_data, 
					data: { 
						year: a.data.current_year, 
						month: a.data.current_month 
					}, 
					success: function(t) { 
						0 == t.code ? a.setData({ 
							daily_avg: t.data.daily_avg, 
							month_count: t.data.month_count, 
							up_rate: t.data.up_rate 
						}) : a.getApp.core.showModal({ 
							title: "提示", 
							content: t.msg, 
							showCancel: !1 
						}); 
					}, 
					complete: function() { 
						a.getApp.core.hideNavigationBarLoading(); 
					} 
				}); 
			} 
		} 
 
 
	} 
</script> 
 
<style scoped> 
	.month-scroll { 
		border-top: 1upx solid #e3e3e3; 
		height: 120upx; 
	} 
 
	.month-list .month-item { 
		width: 20vw; 
		text-align: center; 
		height: 120upx; 
		color: #888; 
		line-height: 1; 
	} 
 
	.month-list .month-item.active { 
		color: #e9ad33; 
	} 
 
	.current-year { 
		color: #888; 
	} 
 
	.current-year .flex-grow-1::after { 
		content: " "; 
		display: block; 
		width: 100%; 
		height: 1upx; 
		background: #e3e3e3; 
	} 
 
	.current-year .flex-grow-1:first-child { 
		padding-right: 40upx; 
	} 
 
	.current-year .flex-grow-1:last-child { 
		padding-left: 40upx; 
	} 
 
	.detail-data { 
		background: #fff; 
		padding: 24upx; 
	} 
 
	.detail-data .flex-grow-1 { 
		width: 33.333333%; 
	} 
</style> 
